<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    :okButtonProps="{ class:{'jee-hidden': true} }"
    @cancel="handleCancel"
    cancelText="关闭">

    <div>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="8" :sm="12">
              <a-form-item label="项目名称">
                <j-input placeholder="" v-model="queryParam.projectName"></j-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="12">
              <a-form-item label="项目ID">
                <j-input placeholder="" v-model="queryParam.id"></j-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="12">
              <a-button type="primary" icon="search" @click="searchQuery">搜索</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange">
        <span slot="action" slot-scope="text, record">
          <a @click="addTenantProject(record)">分配</a>
        </span>
      </a-table>
    </div>

  </j-modal>
</template>

<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { api, addProject } from '../service'
  import store from '@/store';

  export default {
    name: 'TenantProjectModal',
    mixins: [JeecgListMixin],
    data () {
      return {
        title: '未分配项目',
        width: 800,
        visible: false,

        tenantId: '',
        disableMixinCreated: true,
        // 表头
        columns: [
          {
            title: '项目ID',
            align: 'center',
            width: 100,
            dataIndex: 'id'
          },
          {
            title: '项目名称',
            dataIndex: 'projectName'
          }, {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            fixed: 'right',
            width: 147,
            scopedSlots: { customRender: 'action' }
          }
        ],

        url: {
          list: api.unrelateList
        }
      }
    },
    methods: {
      show (tenantId) {
        this.queryParam = {}
        this.visible = true
        this.tenantId = tenantId;
        this.queryParam.tenant_id = this.tenantId;
        this.queryParam.currentTenantId = this.tenantId;
        this.queryParam.currentUserId = store.getters.userInfo.id;
        this.queryParam.wrapper = true;
        this.dataSource = []
        let that = this
        setTimeout(function () {
          that.searchQuery();
        }, 500)
      },
      close () {
        this.visible = false;
      },
      handleCancel () {
        this.close()
      },
      addTenantProject (record) {
        let that = this
        let param = [];
        param.push({ projectId: record.id });
        addProject(this.tenantId, param).then(res => {
          if (res.success) {
            that.$message.success('操作成功')
            this.searchQuery();
            this.$emit('projectReload')
          } else {
            that.$message.warning(res.message)
          }
        });
      }
    }
  }
</script>

<style scoped>
  @import '~@assets/less/common.less';
</style>
